<template>
  <div class='container'>
      <!-- title="新增目录" -->
<el-dialog

        :title="`${form.id ? '修改目录' :'新增目录'}`"
  :visible="dialogVisible"
  width="30%" 
  @close="closeDialog">
<el-form ref="form" :model="form" label-width="80px" :rules="rules">
  <el-form-item  v-if="!subject.id"  label="所属学科" prop="subjectName" label-width="80px">
    <!-- <el-input v-model="form.subjectName" placeholder="所属学科"></el-input> -->
        <el-select v-model="form.subjectName"   placeholder="请选择" style="width:100%" @change="subjectID">
 <el-option  v-for="item in subjectOptions" :key="item.value" :value="item.value" :label="item.label"></el-option>
</el-select>
  </el-form-item>
  <el-form-item label="目录名称" prop="tagName" label-width="80px">
    <el-input v-model="form.tagName" placeholder="请输入目录名称"></el-input>
  </el-form-item>
</el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="closeDialog">取 消</el-button>
    <el-button type="primary" @click="handleSubmit">确 定</el-button>
  </span>
</el-dialog>

  </div>
</template>

<script>
import {simple} from '@/api/hmmm/subjects.js'
import {add,update} from '@/api/hmmm/tags.js'
export default {
  name:'AddTags',
   props:{
        dialogVisible:{
          type:Boolean,
          default:false
        },
   
        },
    
  data () {
    return {
      form: {
        subjectName: '',
        tagName: '',

      },
      subjectID:'',
      rules:{
        subjectName:[{
          required:true,message:'所属学科不能为空',trigger:['blur','change']
        }],
        tagName:[{ required:true,message:'目录名称不能为空',trigger:['blur','change']   }]
      },
      subjectOptions:[],

      // tagName:''
    }
  },
  async created(){
  const {data}= await simple()
  this.subjectOptions=data
  },
   computed:{
   subject(){
  // return {id:4,name:'前端'}||this.$route.query
    return this.$route.query
   }
 },
  methods:{
    closeDialog(){
      this.$emit('update:dialogVisible',false)
      this.$refs.form.resetFields()
      this.form={
            subjectName: '',
        tagName: '',
        subjectID:''
      }

    },
  handleSubmit(){
      this.$refs.form.validate( async  boo=>{
        if(!boo) return 
        if(this.form.id) {
          await update({subjectID:this.form.subjectID, tagName: this.form.tagName,id:this.form.id })
          this.$message.success('修改目录成功')
          
          this.closeDialog()
    this.$emit('getList')
        } else{
    // this.subjectID=this.subject.id||null
        //  await add({subjectID: this.form.subjectName,tagName:this.form.tagName})
                  await add({subjectID: +this.subject.id||null||this.form.subjectName,tagName:this.form.tagName})
        this.$message.success('新增目录成功')
          this.closeDialog()
          this.$emit('getList')
        }
     
 }) 
    },
  //   async  getDetail(id){
  //     this.loading=true
  //  const {data} =await detail({id:id})
  //  console.log(data);
  //  this.form=data
  //  this.loading=false
  //     },
//       subjectID(val){
// console.log(val);
//       }


  },


}
</script>

<style scoped lang='less'></style>

